import React, { Component } from 'react'
//7个组件（在结果中显示，越高越好/越低越好，总分划界分（满分：100），上面的3个配置，解读，因子，总的）
type Event = React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>

// 每条解读的
interface IanalysisItem {
  code: number
  min: number
  max: number
  content: string
  [propName: string]: string | number //为了list[index][e.target.name] = e.target.value
}

// 每个因子的
interface IFactorItem {
  factorid: number
  name: string
  show: number
  evaluation_criteria: number
  demarcation_score: number
  analysis: IanalysisItem[]
  [propName: string]: string | number | IanalysisItem[] //为了list[index][e.target.name] = e.target.value
}

// 基础props
interface IProps {
  index: number
  factorChange: (e: Event, index: number) => void
}

// Show组件的props
interface IShowProps extends IProps {
  show: number
}

// EvaluationCriteria组件的props
interface IEvaluationCriteriaProps extends IProps {
  evaluation_criteria: number
}

// DemarcationScore组件的props
interface IDemarcationScoreProps extends IProps {
  demarcation_score: number
}

// Configure组件的props
interface IConfigureProps extends IProps {
  factor: IFactorItem
}

// Analysis组件的props
interface IAnalysisProps {
  analysisList: IanalysisItem[]
  index: number
  analysisChange: (e: Event, index: number, i: number) => void
  addAnalysis: (index: number) => void
}

// Factor组件的props
interface IFactorProps extends IProps {
  factor: IFactorItem
  analysisChange: (e: Event, index: number, i: number) => void
  addAnalysis: (index: number) => void
}


const list: IFactorItem[] = [
  {
    factorid: 2718974317,
    name: '因子1',
    show: 1,
    evaluation_criteria: 1,
    demarcation_score: 60,
    analysis: [{ code: 1212, min: 20, max: 30, content: '和欧俄劈腿业务1' },
      { code: 12121, min: 30, max: 40, content: '和欧俄劈腿业务2' }]
  },
  {
    factorid: 271897431789,
    name: '因子2',
    show: 0,
    evaluation_criteria: 0,
    demarcation_score: 60,
    analysis: [{ code: 122, min: 20, max: 30, content: '和欧俄1' },
      { code: 121, min: 30, max: 40, content: 'ewr务2' }]
  }
]


// 在结果中显示
class Show extends Component<IShowProps> {
  // 因子input改变的时候
  factorChange = (e: Event): void => {
    this.props.factorChange(e, this.props.index)
  }
  render() {
    return (<li>
      <input type='checkbox' name='show' value={this.props.show} onChange={this.factorChange} />在结果中显示
    </li>)
  }
}

// 越高越好/越低越好
class EvaluationCriteria extends Component<IEvaluationCriteriaProps> {
  // 因子input改变的时候
  factorChange = (e: Event): void => {
    this.props.factorChange(e, this.props.index)
  }
  render() {
    return (<li>
      <input type='radio' name='evaluation_criteria' value={this.props.evaluation_criteria} onChange={this.factorChange} />越高越好
      <input type='radio' name='evaluation_criteria' value={this.props.evaluation_criteria} onChange={this.factorChange} />越低越好
    </li>)
  }
}

// 总分划界分（满分：100）
class DemarcationScore extends Component<IDemarcationScoreProps> {
  // 因子input改变的时候
  factorChange = (e: Event): void => {
    this.props.factorChange(e, this.props.index)
  }
  render() {
    return (<li>
      <p>总分划界分（满分：100）</p>
      <input type='input' name='demarcation_score' value={this.props.demarcation_score} onChange={this.factorChange} />
    </li>)
  }
}

// 上面的3个配置
class Configure extends Component<IConfigureProps> {
  render() {
    const { factor, index, factorChange } = this.props
    return (
      <>
        <Show show={factor.show} index={index} factorChange={factorChange} />
        <EvaluationCriteria evaluation_criteria={factor.evaluation_criteria} index={index} factorChange={factorChange} />
        <DemarcationScore demarcation_score={factor.demarcation_score} index={index} factorChange={factorChange} />
      </>
    )
  }
}

// 解读
class Analysis extends Component<IAnalysisProps> {
  // 解读input改变的时候
  analysisChange = (e: Event, i: number): void => {
    this.props.analysisChange(e, this.props.index, i)
  }
  // 新增一条解读
  addAnalysis = (): void => {
    this.props.addAnalysis(this.props.index)
  }
  render() {
    const analysisList = this.props.analysisList
    return (<>
      <li>解读：</li>
      {
        analysisList.map((val, i) => {
          return <li key={val.code}>
            <p>当（得分-划界分）在</p>
            <input type='input' name='min' value={val.min} onChange={(e) => this.analysisChange(e, i)} />～
            <input type='input' name='max' value={val.max} onChange={(e) => this.analysisChange(e, i)} />
            <p>之间，则显示</p>
            <textarea rows={3} cols={20} name='content' value={val.content} onChange={(e) => this.analysisChange(e, i)} />
          </li>
        })
      }
      <button onClick={this.addAnalysis}>新增一条解读</button>
    </>)
  }
}


// 因子
class Factor extends Component<IFactorProps> {
  render() {
    const factor = this.props.factor
    return (<ul>
      <h2>{factor.name}</h2>
      <Configure factor={factor} index={this.props.index} factorChange={this.props.factorChange} />
      <Analysis analysisList={factor.analysis} index={this.props.index} analysisChange={this.props.analysisChange} addAnalysis={this.props.addAnalysis} />
    </ul>)
  }

}


// 总的
class Plan2 extends Component<Record<string, unknown>, { list: IFactorItem[] }> {
  constructor(props: Record<string, unknown>) {
    super(props)
    this.state = {
      list
    }
  }
  // 因子input改变的时候
  factorChange = (e: Event, index: number): void => {
    const list = this.state.list
    list[index][e.target.name] = e.target.value
    this.setState({ list })
  }
  // 解读input改变的时候
  analysisChange = (e: Event, index: number, i: number): void => {
    const list = this.state.list
    list[index].analysis[i][e.target.name] = e.target.value
    this.setState({ list })
  }
  // 新增一条解读
  addAnalysis = (index: number): void => {
    const list = this.state.list
    list[index].analysis.push({ code: Math.random() * 1000, min: 0, max: 0, content: '' })
    this.setState({ list })
  }
  // // 提交
  submit = (): void => {
    console.log('submit', this.state.list)
  }

  render(): JSX.Element {
    return (
      <div>
        {
          this.state.list.map((item, index) => {
            return <Factor key={item.factorid} factor={item} index={index} factorChange={this.factorChange} analysisChange={this.analysisChange} addAnalysis={this.addAnalysis} />
          })
        }
        <button onClick={this.submit} >提交</button>
      </div>
    )
  }
}

export default Plan2